<template>
  <img src="./img/bg.png" alt="" class="bg" />
  <div class="topSitting">头部占位</div>

  <div class="banner">
    <div class="bannerItem" @click="goFaceInfo">
      <img src="./img/miantangxinxi_bg.png" alt="" class="itemBg" />
      <div class="itemText">
        <div class="chineseText">面谈信息</div>
        <div class="englishText">Co borrower</div>
      </div>
      <img
        src="./img/miantangxixi_icon_unchecked.png"
        alt=""
        class="faceInfo"
      />
    </div>
    <div class="bannerItem" @click="goGuarantor">
      <img
        src="./img/baozhengrentianjia_bg_unselected.png"
        alt=""
        class="itemBg"
      />
      <div class="itemText">
        <div class="chineseText">保证人添加</div>
        <div class="englishText">Co borrower</div>
      </div>
      <img
        src="./img/baozhengrentianjia_icon.png"
        alt=""
        class="guarantorAdd"
      />
    </div>
  </div>
  <div class="banner" v-if="!investigateInfo.isGov">
    <div class="bannerItem" @click="goIncome">
      <img src="./img/shouruxinxiburu_bg.png" alt="" class="itemBg" />
      <div class="itemText">
        <div class="chineseText">收入信息补充</div>
        <div class="englishText">Co borrower</div>
      </div>
      <img src="./img/con-income.png" alt="" class="getIn" />
    </div>
    <div class="bannerItem" @click="goHouse">
      <img src="./img/hose_bg.png" alt="" class="itemBg" />
      <div class="itemText">
        <div class="chineseText">房产信息补充</div>
        <div class="englishText">Co borrower</div>
      </div>
      <img src="./img/hose_icon.png" alt="" class="houseInfo" />
    </div>
  </div>

  <div class="userInfo">
    <div class="infoTitle">客户信息</div>
    <img src="./img/daban_bg.png" alt="" class="infoTitleBg" />
    <div class="preview">预览</div>
    <div class="infoItem">
      <div class="itemTitle">姓名</div>
      <div class="itemValue">{{ investigateInfo.custName }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">身份证号</div>
      <div class="itemValue">{{ investigateInfo.cardNo }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">手机号</div>
      <div class="itemValue">{{ investigateInfo.custPhone }}</div>
    </div>
  </div>
  <div class="creditInfo">
    <div class="infoTitle">授信信息</div>
    <img src="./img/daban_bg.png" alt="" class="infoTitleBg" />
    <div class="preview">审核驳回</div>
    <div class="infoItem">
      <div class="itemTitle">系统额度</div>
      <div class="itemValue suggest">
        {{ investigateInfo.preCreditQuota }}
        <div class="itemIcon"></div>
      </div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">系统利率</div>
      <div class="itemValue suggest">
        {{ investigateInfo.preYearRate }}
        <div class="itemIcon"></div>
      </div>
    </div>
    <up-form
      labelPosition="left"
      labelWidth="200rpx"
      labelStyle="font-size:28rpx;color:#666666;"
      :model="investigateInfo"
    >
      <up-form-item label="建议额度(元)" prop="finalQuota" borderBottom>
        <up-input
          v-model="investigateInfo.finalQuota"
          inputAlign="right"
          border="none"
        ></up-input>
      </up-form-item>
      <up-form-item label="建议利率(%)" prop="finalYearRate" borderBottom>
        <up-input
          v-model="investigateInfo.finalYearRate"
          inputAlign="right"
          border="none"
        ></up-input>
      </up-form-item>
      <up-form-item label="授信期限(月)" prop="authTime" borderBottom>
        <up-input
          v-model="investigateInfo.authTime"
          inputAlign="right"
          border="none"
        ></up-input>
      </up-form-item>
      <up-form-item
        label="单笔用款最长期限(月)"
        prop="singleUseTime"
        borderBottom
      >
        <up-input
          v-model="investigateInfo.singleUseTime"
          inputAlign="right"
          border="none"
        ></up-input>
      </up-form-item>
    </up-form>
    <div class="infoItem" @click="paymentShow = true">
      <div class="itemTitle">还款方式</div>
      <div class="itemValue" @click="paymentShow = true">
        {{
          investigateInfo.repayModeType
            ? investigateInfo.repayModeType
            : "请选择"
        }}
        <div class="itemIcon"></div>
      </div>
    </div>
    <div class="infoItem BackItem">
      <div class="itemTitle">驳回原因</div>
      <div class="itemValue">
        驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回驳回
      </div>
    </div>
  </div>

  <div class="bottomBtn">
    <div class="btnItem">返回首页</div>
    <div class="btnItem endBtn">终止办理</div>
    <div class="btnItem" @click="nextStep">下一步</div>
  </div>
  <up-picker
    :show="paymentShow"
    :columns="paymentCols"
    @cancel="paymentShow = false"
    @confirm="checkPayment"
  ></up-picker>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as http from "../../utils/http";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const investigateInfo = reactive({});
const paymentShow = ref(false);
const paymentCols = reactive([
  [
    "按月等额本息还款",
    "按月等额本金还款",
    "按月结息到期一次性还本",
    "按季等额本息还款",
    "按季等额本金还款",
    "按季结息到期一次性还本",
  ],
]);
const checkPayment = (e) => {
  investigateInfo.repayModeType = e.value[0];
  console.log(e.value[0]);
  investigateInfo.repayMode =
    e.value[0] === "按月等额本息还款"
      ? "01"
      : e.value[0] === "按月等额本金还款"
      ? "02"
      : e.value[0] === "按月结息到期一次性还本"
      ? "03"
      : e.value[0] === "按季等额本息还款"
      ? "10"
      : e.value[0] === "按季等额本金还款"
      ? "11"
      : "12";
  console.log(investigateInfo.repayMode);
  paymentShow.value = false;
};
// 还款方式
const isGetFace = ref(false);
const isGetGuarantor = ref(false);
const isGetIncome = ref(false);
const isGetHouse = ref(false);
const inputInfo = reactive({
  finalLimit: "",
});
onLoad((options) => {
  let params = JSON.parse(options.value);
  investigateInfo.isGov = params.isGov;
  investigateInfo.orderNo = params.orderNo;
  investigateInfo.orderId = params.orderId;
  investigateInfo.cardNo = params.cardNo;
  investigateInfo.custName = params.custName;
  investigateInfo.custPhone = params.custPhone;
  investigateInfo.preCreditQuota = params.preCreditQuota;
  investigateInfo.preYearRate = params.preYearRate;
  investigateInfo.finalQuota = params.finalQuota;
  investigateInfo.finalYearRate = params.finalYearRate;
  investigateInfo.singleUseTime = params.singleUseTime;
  investigateInfo.authTime = params.authTime;
  investigateInfo.repayMode = params.repayMode;
  investigateInfo.repayModeType =
    params.repayMode === "01"
      ? "按月等额本息还款"
      : params.repayMode === "02"
      ? "按月等额本金还款"
      : params.repayMode === "03"
      ? "按月结息到期一次性还本"
      : params.repayMode === "10"
      ? "按季等额本息还款"
      : params.repayMode === "11"
      ? "按季等额本金还款"
      : params.repayMode === "12"
      ? "按季结息到期一次性还本"
      : "";
});
// 面谈信息
const goFaceInfo = () => {
  let params = {
    custName: investigateInfo.custName,
    cardNo: investigateInfo.cardNo,
    custPhone: investigateInfo.custPhone,
    orderNo: investigateInfo.orderNo,
    orderId: investigateInfo.orderId,
  };
  wx.navigateTo({
    url: "../faceInfo/faceInfo?value=" + JSON.stringify(params),
  });
};
// 保证人添加
const goGuarantor = () => {
  let param = { orderId: investigateInfo.orderId };
  wx.navigateTo({
    url: "../guarantor/guarantor?value=" + JSON.stringify(param),
  });
};
// 收入信息
const goIncome = () => {
  let param = { orderId: investigateInfo.orderId };
  wx.navigateTo({
    url: "../addIncome/addIncome?value=" + JSON.stringify(param),
  });
};
// 房产信息
const goHouse = () => {
  let param = { orderId: investigateInfo.orderId };
  wx.navigateTo({
    url: "../addHouse/addHouse?value=" + JSON.stringify(param),
  });
};

// 底部按钮--下一步
const nextStep = () => {
  http
    .creditSave({
      orderId: store.orderId,
      proposalCreditQuota: investigateInfo.preCreditQuota,
      proposalYearRate: investigateInfo.preYearRate,
      authTime: investigateInfo.authTime,
      singleUseTime: investigateInfo.singleUseTime,
      repayMode: investigateInfo.repayMode,
    })
    .then((res) => {
      http
        .creditSceneInspectToApprove({
          orderNo: investigateInfo.orderNo,
          orderId: investigateInfo.orderId,
        })
        .then((res) => {
          http
            .createApproveByOrderId({
              orderId: investigateInfo.orderId,
            })
            .then((res) => {
              wx.switchTab({
                url: "../../pages/index/index",
              });
            });
        })
        .catch((err) => {
          wx.showToast({
            title: "提交失败，请稍后再试",
            icon: "none",
            duration: 1000,
            mask: true,
          });
        });
    });
};
</script>

<style scoped lang="scss">
.bg {
  width: 750rpx;
  height: 863rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -999999;
}
.topSitting {
  height: 30rpx;
  opacity: 0;
}
.banner {
  margin: 0 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 133rpx;
  .bannerItem {
    width: 326rpx;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    .itemBg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99999;
    }
    .itemText {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      color: #fff;
      .chineseText {
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }
      .englishText {
        font-size: 20rpx;
      }
    }
    .faceInfo {
      width: 97rpx;
      height: 84rpx;
    }
    .guarantorAdd {
      width: 91rpx;
      height: 89rpx;
    }
    .getIn {
      width: 88rpx;
      height: 89rpx;
    }
    .houseInfo {
      width: 82rpx;
      height: 83rpx;
    }
  }
}
.userInfo {
  position: relative;
  margin: 30rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 60rpx 30rpx 0 30rpx;
  .infoTitle {
    width: 260rpx;
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    font-size: 28rpx;
    color: #fff;
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 0;
    transform: translate(-50%);
  }
  .infoTitleBg {
    width: 260rpx;
    height: 45rpx;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    z-index: 9;
  }
  .preview {
    position: absolute;
    top: 13rpx;
    right: 38rpx;
    color: #3277f2;
    font-size: 28rpx;
    text-decoration-line: underline;
  }
  .infoItem:last-child {
    border: none;
  }
  .infoItem {
    padding: 25rpx 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      color: #666666;
    }
    .itemValue {
      color: #999999;
    }
  }
}
.creditInfo {
  position: relative;
  margin: 30rpx;
  border-radius: 16rpx;
  background-color: #fff;
  padding: 60rpx 30rpx 0 30rpx;
  .infoTitle {
    width: 260rpx;
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    font-size: 28rpx;
    color: #fff;
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 0;
    transform: translate(-50%);
  }
  .infoTitleBg {
    width: 260rpx;
    height: 45rpx;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    z-index: 9;
  }
  .preview {
    position: absolute;
    top: 13rpx;
    right: 38rpx;
    color: #fc810f;
    font-size: 28rpx;
    text-decoration-line: underline;
  }
  .infoItem:last-child {
    border: none;
  }
  .infoItem {
    padding: 25rpx 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      height: 40rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #fc810e;
      .itemIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 1rpx solid #999999;
        border-right: 1rpx solid #999;
        transform: rotate(45deg);
        margin-left: 20rpx;
      }
    }
    .suggest {
      color: #3277f2;
    }
  }
  .BackItem {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .itemTitle {
      height: 40rpx;
      color: #666666;
      margin-bottom: 10rpx;
    }
    .itemValue {
      color: #333333;
    }
  }
}
.bottomBtn {
  padding: 30rpx 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .btnItem {
    width: 130rpx;
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    border-radius: 8rpx;
    background-image: linear-gradient(to right, #619df1, #4478c1);
  }
  .endBtn {
    background-image: linear-gradient(to right, #fd8f8f, #fa5656);
    margin: 0 30rpx;
  }
}
</style>
